<template>
	<view class="page">
		<!-- 试玩 -->
		<view class="demo_box" @click="demoOpen('1')"></view>
		<!-- 顶部 -->
		<view class="header">
			<view class="heider_top">
				<view class="header_left">
					<image :src="header_image">
					</image>
				</view>
				<view class="header_right">
					<view class="fenxiang_box" @click.stop="goUrlfen('/orderPage/index/sharemh')">
						<image style="width: 40rpx;height: 40rpx;margin-top:12rpx;" class="share_btn"
							src="https://mh.qingfentool.vip/upload/image/20230522/40204264f2b6c09faa67a1cdd1aa9a65.png">
						</image>
					</view>
					<view class="kefu_box" @click.stop="goUrlke('/orderPage/index/webkefuview')">
						<image style="width: 23px;height: 22px;margin-left: 7px;margin-right: 48rpx;    margin-top: 12rpx;"
							src="https://mh.qingfentool.vip/upload/image/20230513/510f4f36780dbc7fd0a479b46f32830f.png">
						</image>
					</view>
				</view>
			</view>
		</view>
		<!-- banner区 -->
		<view class="contoins_box">
			<!-- 分类按钮 -->
			<view class="left_btn_box">
				<view class="fenleiA_box" v-for="(item, index) in  BtnList" :key="index" @click="fenleiBtn(item)">
					<image :src="item.selected_image" mode="scaleToFill" v-if="item.cat_id == clickId" />
					<image :src="item.image" mode="scaleToFill" v-else />
					<view :class="[item.cat_id == clickId ? 'zhtext_box' : 'zhtext_box1']">{{ item.name }}</view>
					<view :class="[item.cat_id == clickId ? 'ytext_box' : 'ytext_box1']">{{ item.alias_name }}</view>
				</view>
			</view>
			<!-- 轮播区 -->
			<view class="right_banner_box">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item v-for="(item, index) in bannerList" :key="index" @click="bannerBtn(item)">
						<view class="swiper-item uni-bg-red">
							<image :src="item.pic_url" mode="scaleToFill" />
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="chalet_box">
			<view class="chalet_dange_box" v-for="(item, index) in activityList" :key="index" @click="urlBtn(item.navUrl)">
				<view class="chalet_image_box">
					<image :src="item.image" mode="scaleToFill" />
				</view>
				<view class="chalet_text_box">
					{{ item.text }}
				</view>
			</view>
		</view>
		<!-- 内容区 -->
		<scroll-view scroll-y class="main_box" :show-scrollbar="false">
			<view class="main_mh_box" @tap="shopinBtn(item.cat_id, item.box_id)" v-for="(item, index) in conList"
				:key="index">
				<view class="jinxian">
					<image :src="item.open_image" mode="scaleToFill" />
				</view>
				<view class="left_shopPic_box">
					<image :src="item.cover_pic" mode="scaleToFill" />
				</view>
				<view class="right_shopNam_box">
					<view class="top_shopName_box">
						{{ item.name }}
					</view>
					<view class="mid_shopPri_box">¥&nbsp;{{ (item.original_price * 1).toFixed(2) }}</view>
					<view class="bot_shopgv_box" v-if="item.cat_id == 2">
						<text>剩余{{ item.box_current_num }}/总抽{{ item.total }}</text>
					</view>


					<view class="yikaichu_box" v-if="item.cat_id == 0 || item.cat_id == 1">
						<span>已开{{ item.sales }}份未出<text>将军赏</text></span>


					</view>
					<view class="shop_Gv" v-if="item.cat_id == 0 || item.cat_id == 1">
						<view class="dws_box" style="color:#E57600;">
							<view class="name_box">{{ item.level_list[3].name }}赏</view>
							<view class="gv_box">{{
								item.level_list[3].probability + '%' }}</view>


						</view>
						<view class="mws_box" style="color:#E20000;">
							<view class="name_box">{{ item.level_list[2].name }}赏</view>
							<view class="gv_box">{{
								item.level_list[2].probability + '%' }}</view>

						</view>
						<view class="xy_box" style="color:#0057E2;">
							<view class="name_box">{{ item.level_list[1].name }}</view>
							<view class="gv_box">{{
								item.level_list[1].probability + '%' }}</view>
						</view>
						<view class="pu_box" style="color:#A5A5A5;">
							<view class="name_box">{{ item.level_list[0].name }}</view>
							<view class="gv_box">{{
								item.level_list[0].probability + '%' }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 弹窗 -->
		<u-popup mode="center" v-model="item.pupShow" border-radius="20" v-for="(item, index) in pupopList" :key="index">
			<view class="specification_box">
				<image class="img" :src="item.bg_image" mode="widthFix" @tap="popupBtn(item.type, index)" />
				<view class="chongzhigb" @tap="chongzhigbBtn(index)">
					<image src="https://mh.qingfentool.vip/upload/image/20230323/99c827d527a28f1406071b44e75938a9.png"
						mode="scaleToFill" />
				</view>
				<view class="bot_box">
					<view class="di_but_box" @tap="popupBtn(item.type, index)">
						<image style="width: 100%; height:100%;" :src="item.btn_image" mode="scaleToFill" />
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 试玩 -->
		<!-- <u-popup mode="center" v-model="demoShow" border-radius="20">
			<view class="demo_pup_box">
				<view class="demo_top_box">
					<view class="demo_one_box" @click="demoOpen('1')"></view>
					<view class="demo_three_box" @click="demoOpen('2')"></view>
				</view>
				<view class="demo_bot_box">
					<view class="demo_five_box" @click="demoOpen('3')"></view>
					<view class="demo_ten_box" @click="demoOpen('4')"></view>
				</view>



			</view>
		</u-popup> -->
		<zdy-tabbar :current-page="0"></zdy-tabbar>
	</view>
</template>
<script>
export default {
	data() {
		return {
			BtnList: [], //按钮分类
			clickId: 0, //选中按钮
			bannerList: [],// banner图
			indicatorDots: true,
			autoplay: true,
			interval: 6000,
			duration: 500,
			conList: [], //盲盒列表
			loginStatus: false, //未登录状态
			arrList: {},
			pupopList: [], //弹窗列表
			pupopType: [], //弹窗类型
			header_image: '', //顶部图片
			activity_image: '', //集宝器页面图片
			demoShow: false,
			activityList: [
				{
					image: 'https://new.qingfentool.vip/upload/image/20230814/a032da2a1929de1e74cc23cf7d474d47.png',
					text: '签到福利',
					navUrl:'/userPage/user/attendance'
				},
				{
					image: 'https://new.qingfentool.vip/upload/image/20230814/764a1f5279c47f1199836a562884e062.png',
					text: '福利屋',
					navUrl:'/housingfolder/housing'
					
				},
				{
					image: 'https://new.qingfentool.vip/upload/image/20230814/54e747ac670316ae9461e281906894d7.png',
					text: '兑换商城'
				},
				{
					image: 'https://new.qingfentool.vip/upload/image/20230814/375a782cbeacbb5a015e526a8f6d7166.png',
					text: '粉丝互动'
				}
			]

		}
	},
	onLoad() {
		this.tanchuang()
	},
	onShow() {
		this.getLoginStatus()
		this.getList()
		this.adIndex()
	},
	methods: {
		// 试完
		demoOpen(payType) {
			if (payType == 1) {
				uni.navigateTo({
					url: '/orderPage/index/demo?lotto=' + 1
				})
			} 
		},
		// 活动入口跳转
		urlBtn(url){
			uni.navigateTo({
				url:url,
			})
		},
		// 首页弹窗
		tanchuang() {
			this.$Request.get(this.$api.index.defaultindex).then(res => {
				this.pupopList = res.data.pops.data
				this.BtnList = res.data.blind_box_cat
				this.header_image = res.data.header_image
				this.activity_image = res.data.activity_image
				if (res.data.pops.status == 1) {
					for (let i = 0; i < this.pupopList.length; i++) {
						this.pupopType = this.pupopList[i].type
						this.pupopList[i].pupShow = true
					}
				} else {
					return
				}
			})
		},
		// 关闭弹窗
		chongzhigbBtn(index) {
			this.pupopList[index].pupShow = false
			this.$set(this.pupopList, index, this.pupopList[index])
		},
		// 弹窗按钮
		popupBtn(type, index) {
			console.log("type", type)
			if (type == "normal") {
				this.pupopList[index].pupShow = false
				this.$set(this.pupopList, index, this.pupopList[index])
			} else if (type == "charge") {
				if (this.loginStatus) {
					this.pupopList[index].pupShow = false
					this.$set(this.pupopList, index, this.pupopList[index])
					let url = this.pupopList[index].url
					uni.navigateTo({
						url: url
					})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/user/login/public"
						})
					}, 1000)
				}
			} else {
				return
			}
		},
		// 点击轮播图片
		bannerBtn(item) {
			switch (item.page_type) {
				case 1:
					uni.navigateTo({
						url: '/userPage/user/balance?heji_num=' + 88
					})
					break;
				case 2:
					uni.navigateTo({
						url: '/userPage/user/member/index'
					})
					break;
				case 3:
					if (this.loginStatus == false) {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/user/login/public'
							})
						}, 1000)
					} else {
						if (this.arrList.userInfo.agent_status == -1 || this.arrList.userInfo.agent_status == 0) {
							uni.navigateTo({
								url: "/userPage/user/audit?isStatus=" + this.arrList.userInfo.agent_status
							})
						} else {
							uni.navigateTo({
								url: "/userPage/user/myteam?isStatus=" + this.arrList.userInfo.agent_status
							})
						}
					}
					break;
				case 4:
					uni.navigateTo({
						url: '/rollPages/index/BaishoIndex?box_id=' + item.page_id
					})
					break;
				case 5:
					uni.navigateTo({
						url: '/userPage/user/attendance'
					})
					break;
				case 6:
					uni.navigateTo({
						url: '/userPage/user/Seasons?activity_image=' + this.activity_image
					})
					break;
				case 7:
					uni.navigateTo({
						url: '/userPage/user/Seasons1?posterUrl=' + item.poster_url
					})
					break;
				default:
					return

			}
		},
		// 点击盲盒
		shopinBtn(catId, boxId) {
			uni.navigateTo({
				url: '/rollPages/index/BaishoIndex?box_type=' + catId + '&box_id=' + boxId
			})
		},
		//盲盒列表
		getList() {
			let data = {
				cat_id: this.clickId,
				limit: 100
			}
			this.$Request.get(this.$api.mhapi.mangheList, data).then(res => {
				this.conList = res.data.box_list
			})

		},
		adIndex() {
			this.$Request.get(this.$api.index.adIndex).then(res => {
				this.bannerList = res.data
			})
		},
		// 分类按钮
		fenleiBtn(item) {
			this.clickId = item.cat_id
			this.getList()

		},
		// 分享
		goUrlfen(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 客服
		goUrlke(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 获取登录状态
		getLoginStatus() {
			this.$Request.get(this.$api.index.loginStatus).then(res => {
				if (res.data.status == 1) {
					this.loginStatus = true
					this.userList()
				} else {
					this.loginStatus = false
				}
			})
		},
		// 用户信息
		userList() {
			this.$Request.get(this.$api.user.index).then(res => {
				if (res.code == 406) {
					return
				}
				this.arrList = res.data;

			});
		},
	}
}
</script>
<style lang="scss" scoped>
.page {
	width: 100vw;
	height: 100vh;
	background-image: url('https://mh.qingfentool.vip/upload/image/20230512/1b18b05905e022e5fb80fe153a39e46d.png');
	background-size: 100% 100%;
	position: relative;

	// 试玩
	.demo_box {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		background-image: url('https://new.qingfentool.vip/upload/image/20230729/82d53f11de1d23a7b388995397f279e7.png');
		background-size: 100% 100%;
		right: 10rpx;
		top: 1200rpx;
		z-index: 1000;
	}

	

	// 顶部
	.header {
		/* #ifdef APP-PLUS */
		width: 100%;
		height: 156rpx;
		margin-bottom: 5rpx;
		box-sizing: border-box;
		/* #endif */
		position: relative;
		/* #ifdef MP-WEIXIN */
		margin-bottom: 22rpx;
		width: 72vw;
		height: 151rpx;
		/* #endif */

		display: flex;
		justify-content: space-between;
		position: relative;
		overflow-x: hidden;

		.heider_top {
			position: absolute;
			width: 100vw;
			bottom: 0;
			height: 80rpx;
			display: flex;
			/* #ifdef APP-PLUS */
			padding-left: 20rpx;
			padding-right: 32rpx;
			justify-content: space-between;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding-left: 6rpx;
			justify-content: flex-start;
			/* #endif */


			.header_left {
				/* #ifdef APP-PLUS */
				width: 464rpx;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				width: 55%;
				/* #endif */
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.header_right {
				width: 140rpx;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.fenxiang_box {
					width: 44rpx;
					height: 42rpx;
					margin: 0 8rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.kefu_box {
					width: 48rpx;
					height: 44rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}
		}
	}

	.contoins_box {
		width: 96%;
		height: 308rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		margin-bottom: 14rpx;

		.left_btn_box {
			width: 230rpx;
			height: 100%;

			.fenleiA_box {
				width: 100%;
				height: 92rpx;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				margin-bottom: 19rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.zhtext_box {
					width: 60%;
					height: 42rpx;
					font-size: 29rpx;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					/* #ifdef MP-WEIXIN */
					font-weight: 600;
					/* #endif */
					/* #ifdef APP-PLUS */
					font-weight: 400;
					/* #endif */
					color: #FFC400;
					line-height: 42rpx;
					position: absolute;
					right: 0;
					text-align: center;
					bottom: 26rpx;
				}

				.zhtext_box1 {
					width: 60%;
					height: 42rpx;
					font-size: 29rpx;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					/* #ifdef MP-WEIXIN */
					font-weight: 600;
					/* #endif */
					/* #ifdef APP-PLUS */
					font-weight: 400;
					/* #endif */
					color: #FFC400;
					line-height: 42rpx;
					position: absolute;
					right: 0;
					text-align: center;
					bottom: 26rpx;
				}

				.ytext_box {
					width: 100%;
					height: 24rpx;
					font-size: 16rpx;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					/* #ifdef MP-WEIXIN */
					font-weight: 600;
					/* #endif */
					/* #ifdef APP-PLUS */
					font-weight: 400;
					/* #endif */
					color: #FFC400;
					position: absolute;
					bottom: 8rpx;
					text-align: right;
					padding-right: 10rpx;
				}

				.ytext_box1 {
					width: 100%;
					height: 24rpx;
					font-size: 16rpx;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					/* #ifdef MP-WEIXIN */
					font-weight: 600;
					/* #endif */
					/* #ifdef APP-PLUS */
					font-weight: 400;
					/* #endif */
					color: #FFC400;
					position: absolute;
					bottom: 8rpx;
					text-align: right;
					padding-right: 10rpx;
				}
			}
		}

		.right_banner_box {
			width: 466rpx;
			height: 100%;

			.uni-margin-wrap {
				width: 690rpx;
				width: 100%;
			}

			.swiper {
				height: 100%;
			}

			.swiper-item {
				display: block;
				height: 100%;
				// line-height: 300rpx;
				text-align: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}
	}

	.chalet_box {
		width: 96%;
		height: 160rpx;
		margin: auto;
		margin-bottom: 14rpx;
		display: flex;
		justify-content: space-between;


		.chalet_dange_box {
			width: 24%;
			height: 100%;

			.chalet_image_box {
				width: 120rpx;
				height: 120rpx;
				margin: auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.chalet_text_box {
				width: 140rpx;
				height: 40rpx;
				text-align: center;
				margin: auto;
				color: #FFAE2A;
				font-size: 24rpx;
				line-height: 40rpx;
			}
		}
	}

	.main_box {
		width: 96%;
		height: calc(100vh - 806rpx);
		margin: auto;

		.main_mh_box {
			width: 100%;
			height: 250rpx;
			// background: linear-gradient(360deg, #A1703D 2%, #CDAE7F 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin-bottom: 8rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			position: relative;


			.jinxian {
				width: 90rpx;
				height: 90rpx;
				position: absolute;
				top: 21rpx;
				right: 28rpx;
				z-index: 999;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.left_shopPic_box {
				width: 240rpx;
				height: 241rpx;
				background-image: url('https://mh.qingfentool.vip/upload/image/20230512/cd7d674baee9b4c5d00729d6a3d97977.png');
				background-size: 100% 100%;
				position: relative;

				image {
					width: 222rpx;
					height: 248rpx;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
					// animation: rotate 5s linear infinite;
				}

				@keyframes rotate {
					0% {
						transform: rotateY(0deg);
					}

					100% {
						transform: rotateY(360deg);
					}
				}
			}

			.right_shopNam_box {
				width: 450rpx;
				height: 241rpx;
				background-image: url('https://mh.qingfentool.vip/upload/image/20230527/ff57ce2b07063c99db0d7d3d322ac07a.png');
				background-size: 100% 100%;
				position: relative;

				.top_shopName_box {
					// -webkit-text-stroke: 1px #7B3636;
					// text-stroke: 1px #7B3636;
					// // background: linear-gradient(180deg, #FFE2AE 0%, #FFA500 100%);
					// -webkit-background-clip: text;
					// -webkit-text-fill-color: transparent;
					background: #FFA500 linear-gradient(to left, transparent, #FFE2AE, transparent) no-repeat 0 0;
					background-size: 20% 100%;
					background-position: 0 0;
					background-clip: text;
					-webkit-background-clip: text;
					color: transparent;
					animation: shine 3s infinite;
					padding-left: 25rpx;
					padding-top: 20rpx;
					/* #ifdef APP-PLUS */
					font-size: 40rpx;
					font-weight: 400;
					/* #endif */
					/* #ifdef MP-WEIXIN */
					font-weight: 700;
					font-size: 40rpx;
					/* #endif */
					background-clip: text;
					font-family: Alimama_DongFangDaKai_Regular;
					// width: 300rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					@keyframes shine {
						from {
							background-position: 0% 0%;
						}

						to {
							background-position: 100% 100%;
						}
					}

					text {
						display: inline-block;
						/*inline样式不能使用动画*/
						// animation: scroll 3s linear infinite;

						/*滚动动画*/
						@keyframes scroll {
							from {
								transform: translateX(200rpx);
								/*div多宽就写多宽*/
							}

							to {
								transform: translateX(-100%);
							}
						}
					}

				}

				.mid_shopPri_box {
					width: 200rpx;
					height: 70rpx;
					font-size: 37rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: 700;
					color: #FFA100;
					line-height: 70rpx;
					-webkit-text-stroke: 1px #7B0000;
					position: absolute;
					top: 0;
					bottom: 10rpx;
					text-align: center;
					margin: auto;
				}


				.bot_shopgv_box {
					width: 100%;
					height: 80rpx;
					font-size: 30rpx;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					font-weight: 400;
					line-height: 80rpx;
					position: absolute;
					text-align: center;
					bottom: 18rpx;
					margin: auto;
					right: 34rpx;
					-webkit-text-stroke: 1px #7B3636;
					background: linear-gradient(180deg, #FFE2AE 0%, #FDB024 100%);
					-webkit-background-clip: text;
				}

				.yikaichu_box {
					width: 260rpx;
					height: 36rpx;
					text-align: right;
					font-size: 28rpx;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					font-weight: 400;
					line-height: 36rpx;
					position: absolute;
					// background-color: #fff;
					top: 0;
					bottom: -10rpx;
					margin: auto;
					right: 34rpx;
					color: #FFB200;
					overflow: hidden;
					white-space: nowrap;

					span {
						display: inline-block;
						/*inline样式不能使用动画*/
						// animation: scroll 5s linear infinite;

						/*滚动动画*/
						text {
							color: #FA3737;
						}

						@keyframes scroll {
							from {
								transform: translateX(250px);
								/*div多宽就写多宽*/
							}

							to {
								transform: translateX(-100%);
							}
						}
					}

					text {
						color: #FA3737;
					}
				}

				.shop_Gv {
					width: 450rpx;
					height: 80rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					position: absolute;
					bottom: 18rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 28rpx;

					.dws_box,
					.pu_box,
					.mws_box,
					.xy_box {
						width: 96rpx;
						height: 80rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						background-image: url('https://mh.qingfentool.vip/upload/image/20230527/83054a04f36802a0590f09ee7150cffc.png');
						opacity: 1;
						background-size: 100% 100%;

						.name_box {
							width: 100%;
							height: 40rpx;
							font-size: 21rpx;
							font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
							font-weight: 400;
							// color: #E57600;
							line-height: 55rpx;
							text-align: center;
						}

						.gv_box {
							width: 100%;
							height: 40rpx;
							font-size: 19rpx;
							font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
							font-weight: 400;
							// color: #E57600;
							line-height: 35rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}

	/deep/.u-mode-center-box {
		background-color: transparent !important;
	}

	.specification_box {
		width: 655rpx;
		border-radius: 100rpx;
		background-size: 100% 100%;
		position: relative;

		.img {
			width: 100%;
		}

		.chongzhigb {
			position: absolute;
			top: 0;
			right: 0;
			width: 52rpx;
			height: 52rpx;

			image {
				z-index: 2;
				width: 100%;
				height: 100%;
			}
		}

		.bot_box {
			width: 100%;
			height: 70rpx;
			position: absolute;
			bottom: 60rpx;

			.di_but_box {
				width: 250rpx;
				height: 100%;
				margin: auto;
			}
		}
	}
}
</style>